<template>
  <!-- LOGO和系统名称 -->
  <div class="logo">
    <img class="logoImg" src="../assets/logo.png" alt="">
    <transition name="el-fade-in">
      <div class="SystemTitle" v-show="!Store.isCollapse">招投标文件管理</div>
    </transition>
  </div>


  <!-- 菜单 -->
  <el-menu
      background-color="#001529"
      text-color="rgba(255,255,255,0.65)"
      :default-active="currentActive"
      class="el-menu-vertical-demo"
      :collapse="Store.isCollapse"
      router
  >
    <el-menu-item index="/index">
      <el-icon>
        <House/>
      </el-icon>
      <span>系统首页</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <Menu/>
        </el-icon>
        <span>基础管理</span>
      </template>
      <el-menu-item index="/userManage">
        <el-icon>
          <User/>
        </el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/fileManage">
        <el-icon>
          <Files/>
        </el-icon>
        <span>文件管理</span>
      </el-menu-item>
      <el-menu-item index="/permissionManage">
        <el-icon>
          <Lock/>
        </el-icon>
        <span>权限管理</span>
      </el-menu-item>
    </el-sub-menu>


    <el-sub-menu index="3">
      <template #title>
        <el-icon>
          <setting/>
        </el-icon>
        <span>分类管理</span>
      </template>
      <el-menu-item index="/industryClassificationManage">
        <el-icon>
          <Goblet/>
        </el-icon>
        <span>行业分类</span>
      </el-menu-item>
      <el-menu-item index="/domainClassificationManage">
        <el-icon>
          <Money/>
        </el-icon>
        <span>领域分类</span>
      </el-menu-item>
    </el-sub-menu>


    <el-menu-item index="/specificationLibrary">
      <el-icon>
        <Eleme/>
      </el-icon>
      <span>规范库管理</span>
    </el-menu-item>

    <el-menu-item index="/inviteTendersFileSpecification">
      <el-icon>
        <Reading/>
      </el-icon>
      <span>招标文件规范</span>
    </el-menu-item>

    <el-menu-item index="/inviteTendersFileAnalysis">
      <el-icon>
        <DataAnalysis/>
      </el-icon>
      <span>招标文件分析</span>
    </el-menu-item>

    <el-menu-item index="/fileMatchingAnalysisOfInviteTenders">
      <el-icon><DataLine /></el-icon>
      <span>投招标文件匹配分析</span>
    </el-menu-item>


    <el-menu-item index="/automaticBidEvaluation">
      <el-icon><TakeawayBox /></el-icon>
      <span>自动评标</span>
    </el-menu-item>

    <el-menu-item index="/MyFile">
      <el-icon>
        <Document/>
      </el-icon>
      <span>我的文件</span>
    </el-menu-item>

<!--    <el-menu-item index="/test">-->
<!--      <div>测试</div>-->
<!--    </el-menu-item>-->

  </el-menu>
</template>

<script lang="ts" setup>
import {
  Setting,
  User,
  Files,
  Lock,
  Goblet,
  Money,
  Menu,
  House,
  Document,
  Eleme,
  Reading,
  DataAnalysis,
  DataLine,
  TakeawayBox
} from '@element-plus/icons-vue'
import {useRoute} from 'vue-router';
import {computed} from 'vue';
import {mainStore} from '../stores/main.js'  //自定义的pinia状态管理
const Store = mainStore()
const route = useRoute();
const currentActive = computed(() => {
  // 返回匹配当前路由的索引值,用于让对应路径的菜单项高亮
  return route.path;
});
</script>

<style>
.el-menu-vertical-demo {
  /* 增加的部分：隐藏右边框线条 */
  border-right: none;
}

/* Element UI的el-menu组件允许嵌套，在需要的时候确保子菜单的最右边的线也被移除 */
.el-menu-vertical-demo .el-menu-item, .el-menu-vertical-demo .el-sub-menu__title {
  border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/*logo*/
.logo {
  height: 60px;
  /*background-color: #545c64;*/
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoImg {
  width: 30px;
  height: 30px;
}

.SystemTitle {
  margin-left: 5px;
  font-size: 20px;
  white-space: nowrap; /* 确保文本在一行显示，不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.el-sub-menu__title {
  margin: 0 4px 0 0 !important;
}

/*整个二级菜单的背景*/
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
}

/*二级菜单项边距*/
.el-menu-item {
  margin: 0 4px 0 0 !important;
}

/*鼠标移动到二级菜单项时的效果*/
.el-menu-item:hover {
  color: #fff !important;
}

/*鼠标在二级菜单项的点击效果*/
.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  margin: 0 4px 0 0 !important;
  color: white;
}
</style>
